<!DOCTYPE html>
<html lang="en">
    <head>
    <title>AmbientLight环境光测试</title>
        <meta charset="utf-8">
        <script src="../js/three.js" type="text/javascript" ></script>
        <style type="text/css">
            body{
                border:none;
                margin: 0px 0px 0px 0px ;
            }
            div#canvas3d{
                border:none;
                margin: 0px 0px 0px 0px ;               
            }
            div#menu{
                font-size: 130%;
                text-align: center;
                color:white ;
                position:absolute;top:2;left:2;width:60px;height:10px;
            }
        </style>
    </head>
    <body> 
        <div id = "canvas3d">           
            <div id = "menu">
                <button id="btn" type="button" onclick="clicked();">开灯</button>
            </div> 
        </div>
    </body>


    <script>
    var isOpen=true;
    function clicked(){
        isOpen = !isOpen; 
        if(isOpen) {
            ambientLight.intensity=0.0;
            document.getElementById("btn").innerHTML ="开灯";
        }
        else {
            ambientLight.intensity=1.0;
            document.getElementById("btn").innerHTML ="关灯";


        }
    }
    var scene,camera,renderer,ambientLight,sphere;


    function init(){
        scene=new THREE.Scene();
        camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
        camera.position.z=10;
        renderer=new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight); 
        ambientLight = new THREE.AmbientLight(0xffff00,0);


        scene.add(ambientLight);
        var g = new THREE.SphereGeometry(2,50,50);
        var m = new THREE.MeshLambertMaterial({color:0xff00ff}); 
        obj=new THREE.Mesh(g,m);


        scene.add(obj);
        document.getElementById("canvas3d").appendChild(renderer.domElement); 


    }
    function render(){
        requestAnimationFrame(render);
        renderer.render(scene,camera);
       
    }
    init();
    render();


    </script>
</html>